<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: lightblue;
      }
      .tip{
        text-align: center;
      }
      .border {
        position: relative;
        width: 500px;
        height: 500px;
        left: 30%;
        top: 50%;
        border: 7px solid white;
        border-radius: 10px;
      }
      ul {
        position: absolute;
        display: grid;
        /* 实现居中 */
        place-items: center;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
        gap: 10px;

        /* 九宫格相对于方框居中 */
        top: 50%;
        left: 50%;
        margin-top: -160px;
        margin-left: -160px;
      }
      li {
        list-style: none;
      }
      img {
        width: 100px;
        height: 100px;
        background: blue;
        border-radius: 10px;
      }
      li:nth-child(5) {
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 10px;
        cursor: pointer;
      }
      span {
        display: flex;
        justify-content: center;
        margin-top: 35px;
        color: white;
      }
      .op {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="tip">恭喜你中了iPad</div>
    <div class="border">
      <ul>
        <li data-name="游戏机"><img src="./images/1.png" alt="" /></li>
        <li data-name="ipad"><img src="./images/2.png" alt="" /></li>
        <li data-name="笑脸"><img src="./images/3.png" alt="" /></li>
        <li data-name="鞋子"><img src="./images/4.png" alt="" /></li>
        <li class="start"><span>开始抽奖</span></li>
        <li data-name="小娃娃"><img src="./images/5.png" alt="" /></li>
        <li data-name="手机"><img src="./images/6.png" alt="" /></li>
        <li data-name="电脑"><img src="./images/7.png" alt="" /></li>
        <li data-name="汽车"><img src="./images/8.png" alt="" /></li>
      </ul>
    </div>

    <script>
      // 获取开始抽奖按钮,li的dom元素
      const start = document.querySelector('.start')
      const li = document.querySelectorAll('li')
      const tip = document.querySelector('.tip')
      let i = 0
      console.log(li)
      //监听start的点击事件
      start.addEventListener('click', function () {
        // 定义一个数组实现循环
        const arr = [0, 1, 2, 5, 8, 7, 6, 3]
        // 每隔一秒执行一次转动
        var timer = setInterval(function () {
          if (i <= arr.length - 1) {
            // 排他
            li.forEach(function (item) {
              item.classList.remove('op')
            })
            li[arr[i]].classList.add('op')
            i++
          } else {
            i = 0
          }
        }, 50)
        // 设置随机时间停止抽奖
        setTimeout(() => {
          clearInterval(timer)
          li.forEach(function (item) {
            if (item.classList.contains('op')) {
              tip.innerHTML = `恭喜你获得了${item.dataset.name}`
            }
          })
        }, Math.random() * 4000)
      })
    </script>
  </body>
</html>
